<template>
  <div style="padding: 20px">
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:list:add']"
          >新增</el-button
        >
      </el-col>

      <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:list:remove']"
          >删除</el-button
        >
      </el-col>

      <right-toolbar @queryTable="getList"></right-toolbar>
    </el-row>

    <el-table
      v-loading="loading"
      :data="listList"
      @selection-change="handleSelectionChange"
    >
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="ID" align="center" prop="id" />
      <el-table-column label="盒子id" align="center" prop="goodsId" />

      <el-table-column label="赏分类" align="center" prop="shangId">
        <template slot-scope="scope">
          {{ class_shang[scope.row.shangId] }}
        </template>
      </el-table-column>

      <el-table-column label="开始位置" align="center" prop="type">
        <template slot-scope="scope">
          <el-tag type="warning">{{ scope.row.sstart }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        sortable="custom"
        label="结束位置"
        align="center"
        prop="type"
      >
        <template slot-scope="scope">
          <el-tag type="success">{{ scope.row.send }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        label="创建时间"
        align="center"
        prop="createDate"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.createTime
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        label="更新时间"
        align="center"
        prop="createDate"
        width="180"
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.updateTime
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template slot-scope="scope">
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            @click="handleUpdate(scope.row)"
            v-hasPermi="['system:list:edit']"
            >修改</el-button
          >

          <el-button
            size="mini"
            type="text"
            icon="el-icon-delete"
            @click="handleDelete(scope.row)"
            v-hasPermi="['system:list:remove']"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :title="title"
      :visible.sync="openSettle"
      width="500px"
      append-to-body
    >
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item   label="赏ID" prop="shangId">
          <el-select
            v-model="form.shangId"
            clearable
            placeholder="请选择赏类型"
          >
            <el-option
              v-for="item in shang_option"
              :key="item.label"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item   label="区间开始位置" prop="sStart">
          <!-- <el-input v-model="form.sStart" placeholder="请输入区间开始位置" /> -->
          <el-input-number
            v-model="form.start"
            :min="1"

            label="请输入区间开始位置"
          ></el-input-number>
        </el-form-item>

        <el-form-item   label="区间结束位置" prop="sEnd">
          <el-input-number
            v-model="form.end"
            :min="1"
            :max="9999"
            label="请输入区间结束位置"
          ></el-input-number>
          <!-- <el-input v-model="form.sEnd" placeholder="请输入区间结束位置" /> -->
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="end">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getType } from "@/api/yfs/add_good.js";
import { listPrize, updatePrize, delPrize, addPrize } from "@/api/yfs/box.js";
export default {
  data() {
    return {
      listList: [],
      loading: false,
      queryParams: {
        goodsId: null,
      },
      multiple: true,
      openSettle: false,
      class_shang: {},
      typeList: [],
      shang_option: null,
      title: "修改",
      form: {
        start: null,
        end: null,
        shangId: null,
      },
      type: null,

      // 表单校验
      rules: {
        shangId: [
          { required: true, message: "赏类型不能为空", trigger: "blur" },
        ],
        end: [{ required: true, message: "结束区间不能为空", trigger: "blur" }],
        start: [
          {
            required: true,
            message: "开始区间不能为空",
            trigger: "blur",
          },
        ],
      },
    };
  },

  created() {
    this.queryParams.goodsId = this.$route.params.boxId || null;
    console.log(this.queryParams.goodsId);
    this.getType();
  },

  methods: {
    //获取赏类型
    getType() {
      getType().then((res) => {
        this.typeList = res.rows;
        this.typeList.forEach((item) => {
          this.class_shang[item.id] = item.title;
        });
        this.shang_option = this.typeList.map((item) => {
          return {
            value: item.id,
            label: item.title,
          };
        });
        this.getList();
      });
    },

    //获取中奖区间列表
    getList() {
      this.loading = true;

      listPrize(this.queryParams.goodsId).then((response) => {
        this.listList = response.data;
        console.log(this.listList);
        this.loading = false;
        console.log(response);
      });
    },

    //修改
    handleUpdate(e) {
      this.openSettle = true;
      this.title = "修改" + this.class_shang[e.shangId] + "中奖区间";
      this.form.id = e.id;
      this.form.goodsId = this.queryParams.goodsId;
      this.type = 1;
      this.form = {
        id: e.id,
        goodsId: this.queryParams.goodsId,
        start: e.sstart,
        end: e.send,
        shangId: e.shangId,
      };
    },
    //删除
    handleDelete(e) {
      this.$confirm(
        "确定删除" + this.class_shang[e.shangId] + "中奖区间吗？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).then(() => {
        let arr=[]
        arr.push(e.id)
        delPrize(arr).then((res) => {
          this.getList();
        });
      });
    },
    //添加
    handleAdd(e) {
      this.openSettle = true;
      this.title = "添加中奖区间";

      this.form.goodsId = this.queryParams.goodsId;
      this.type = 2;
      this.form.goodsId = this.queryParams.goodsId;
    },
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    end() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.type == 1) {
            let arr = [];
            arr.push(this.form);
            updatePrize(arr).then((res) => {
              this.openSettle = false;
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
              }
              this.getList();
            });
          } else {
            let arr = [];
            arr.push(this.form);
            addPrize(arr).then((res) => {
              this.openSettle = false;
              if (res.code == 200) {
                this.$message({
                  message: res.msg,
                  type: "success",
                });
              }
              this.getList();
            });
          }
        }
      });
    },
    cancel() {
      this.openSettle = false;
    },
  },
};
</script>

<style></style>
